<template>
  <div class="roleAddPage">
    <!-- <div class="back" @click="back()">
      <i class="el-icon-arrow-left"></i>返回
    </div> -->
    <el-form
      class="addForm errorForm"
      ref="form"
      :model="roleForm"
      :rules="rules"
      label-width="90px"
    >
      <el-form-item class="noRequire" label="*用户名：" prop="userName">
        <el-input v-model="roleForm.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item class="noRequire" label="*昵称：" prop="name">
        <el-input v-model="roleForm.name" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item class="noRequire" label="*手机号：" prop="phone">
        <el-input v-model="roleForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item class="noRequire" label="*权限：" prop="roleId">
        <el-select class="maxInput" v-model="roleForm.roleId"  clearable placeholder="请选择">
          <el-option
            v-for="item in userRole"
            :key="item.id"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item class="add">
        <el-button class="submitBtn" type="primary" @click="submitForm()"
          >确 定</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { addUserApi, getRoleInfoApi, updataUserApi } from '@/api/user'

export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      roleForm: {
        baseId: 1,
        password: '',
        userId: ''
      },
      userRole: [],
      oldRoleForm: [],
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        roleId: [{ required: true, message: '请选择权限', trigger: 'change' }]
      }
    }
  },

  mounted () {
    this.roleDict()
    this.$set(this, 'roleForm', { ...this.$route.query })
    if (this.$route.query.userId) {
      this.roleForm.roleId = this.roleForm.roleId ? Number(this.roleForm.roleId) : null
    }
  },
  watch: {

  },
  methods: {
    // 密码重置
    changePassword () {
      this.$alert(
        'Tips：重置密码后，密码恢复为默认密码“8个8”',
        '确定重置该账号密码？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          customClass: 'alertClass',
          showCancelButton: true,
          closeOnClickModal: false,
          showClose: false
        }).then(async () => {
        this.oldRoleForm.password = 88888888
        const res = await updataUserApi(this.oldRoleForm)
        if (res.code === 200) {
          this.$message.success('重置成功')
          this.roleForm.password = 88888888
          this.params.current = 1
          this.getUserPage(this.params)
        } else {
          this.$message.error('重置失败')
        }
      })
        .catch(action => {
        })
    },
    // 编辑获取数据
    getData (userInfo) {
      this.$set(this, 'roleForm', { ...userInfo })
      this.$set(this, 'oldRoleForm', { ...userInfo })
      if (this.$route.query.userId) {
        this.roleForm.roleId = this.roleForm.roleId ? Number(this.roleForm.roleId) : null
      }
    },
    // 提交数据
    submitForm () {
      this.$refs.form.validate(async valid => {
        if (this.roleForm.userId !== '') {
          this.roleForm.userId = +this.roleForm.userId
        }
        if (valid) {
          if (!this.roleForm.userId) {
            this.roleForm.baseId = this.$store.getters.userInfo.baseId
            this.roleForm.password = 88888888
            const res = await addUserApi(this.roleForm)
            this.$message.success(res.msg)
            this.$emit('resetting')
          } else {
            this.roleForm.baseId = this.$store.getters.userInfo.baseId
            const res = await updataUserApi(this.roleForm)
            this.$message.success(res.msg)
            this.$emit('resetting')
          }
        } else {
          // Form is invalid, do something
          console.log('错误')
        }
      })
    },
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriRole'
      })
    },
    // 权限字典
    async roleDict () {
      const res = await getRoleInfoApi()
      this.userRole = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.roleAddPage {
  .addForm {
    padding:0 40px 0 40px
  }
  .submitBtn {
    width: 19.7917vw;
    height: 3.125vw * 0.834;
    background: #19b560;
    border-radius: 12px 12px 12px 12px;
  }
}
</style>
